<!--  -->
<template>
  <div class='wrap'>
    <div class="left">
      <p>合计收入 (元)</p>
      <p>1200.00</p>
    </div>
    <div class="right">
      <!-- 上面部分 -->
      <div class='flex-box'>
       <p class='price-info'>
          <span>应收合计 (元)</span>
          <span>1200.00</span>
       </p>
       <p class='price-info'>
          <span>优惠合计 (元)</span>
          <span>1200.00</span>
       </p>
       <p class='price-info'>
          <span>实收合计 (元)</span>
          <span>1200.00</span>
       </p>
      </div>
      <!-- 下面部分 -->
      <div class='flex-box'>
       <p class='price-info'>
          <span>医保 (元)</span>
          <span>1200.00</span>
       </p>
       <p class='price-info'>
          <span>会员 (元)</span>
          <span>1200.00</span>
       </p>
       <p class='price-info'>
          <span>现金 (元)</span>
          <span>1200.00</span>
       </p>
       <p class='price-info'>
          <span>支付宝 (元)</span>
          <span>1200.00</span>
       </p>
       <p class='price-info'>
          <span>微信 (元)</span>
          <span>1200.00</span>
       </p>
       <p class='price-info'>
          <span>银行卡 (元)</span>
          <span>1200.00</span>
       </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},
};
</script>
<style lang="less" scoped>
.wrap {
  height: 107px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  .left {
    width: 15%;
    background-color: #fffae9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    p:nth-of-type(1) {
      font-size: 14px;
      margin-bottom: 8px;color:#54534C;
    }
    p:nth-of-type(2) {
      font-size: 24px;
      color: #666ee8;
      font-weight: bold;
    }
  }
  .right {
    width: 82%;
    background-color: #fffae9;
    .flex-box{
      height: 50%;
      display:flex;align-items:center;
      .price-info{
        width:calc(100% / 6);
        display:flex;flex-direction: column;align-items: center;
        justify-content: center;
        span:nth-of-type(1){color:#54534C;font-size:12px;margin-bottom:5px;}
        span:nth-of-type(2){color:#666ee8;font-weight: bold;}
      }
    }
  }
}
</style>